<template>
  <!-- 腾讯地图 -->
  <section>
    <div id="container"></div>
    <!-- <span class="text-warning">&nbsp;可拖动放大</span> -->
  </section>
</template>

<script>
export default {
  name: "Tx-Map",
  props: {
    listData: {
      type: Array,
      default: []
    },
    listDataStyle: {
      type: Object,
      default: {}
    }
  },
  comments: {},
  data() {
    return {
      Map: null,
      Marker: null,
      LatLng: null,
      Event: null,
      MarkerCluster: null,
      MarkerDecoration: null,
      MVCArray: null,
      Point: null
    };
  },
  watch: {},
  mounted() {
  },
  methods: {
    setCenter(lat, lng) {
      // this.Map.setCenter(new TMap.LatLng(lat,lng))
      var latLngBounds = new TMap.LatLngBounds(new TMap.LatLng(lat,lng), new TMap.LatLng(lat, lng))
      this.Map.fitBounds(latLngBounds)
      // this.Map.
    },
    init(zoom = 8, lat = 39.911265, lng = 116.375212, storeAddress) {
      console.log(">>>",this.listData)

      // let center = new TMap.LatLng(lat,lng)
      let center = new TMap.LatLng(this.listData[0].position.lat, this.listData[0].position.lng)
      this.Map = new TMap.Map(document.getElementById("container"), {
        center: center,
        zoom: 5
      });
      let that = this
      console.log(">>>",that.listData)
      //   //初始marker
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: that.Map,
        styles: that.listDataStyle,
        geometries: [
          ...that.listData
        ]
      });
      console.log(marker)
      marker.updateGeometries(that.listData)
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: that.Map,
        position: new TMap.LatLng(that.listData[0].position.lat, that.listData[0].position.lat),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`
            <div style="white-space:nowrap;margin:10px;color:#000;text-align:left;">
              <img style="width: 50px;height:50px;border-radius:50%;" src="${evt.geometry.properties.work_img}" />
              <p style="font-size:16px;">助教姓名：${evt.geometry.properties.coach_name}</p>
              <p style="font-size:16px;">地址：${evt.geometry.properties.address}</p>
              <p style="font-size:16px;">经纬度：${evt.geometry.properties.lat} , ${evt.geometry.properties.lng}</p>
            </div>`
        );//设置信息窗内容
      })
    },
    initTest(zoom = 8, lat = 39.911265, lng = 116.375212, storeAddress) {
      console.log("地图初始化-纬度--lat", lat);
      console.log("地图初始化-经度--lng", lng);
      console.log("Map->", this.Map)
      this.Map = qq.maps.Map
      this.Marker = qq.maps.Marker
      this.LatLng = qq.maps.LatLng
      this.MarkerCluster = qq.maps.MarkerCluster
      this.MarkerDecoration = qq.maps.MarkerDecoration
      this.MVCArray = qq.maps.MVCArray
      this.Point = qq.maps.Point
      let that = this
      var latlng = new that.LatLng(39.91, 116.38);
      var options = {
        'zoom':11,
        'center':latlng,
        'mapTypeId':"roadmap"
      };
      var map = new that.Map(document.getElementById("container"), options);

      var markers = new that.MVCArray();
      for (var i = 0; i < that.mock.length; i++) {
        var latLng = new that.LatLng(that.mock[i][0], that.mock[i][1]);
        var decoration = new that.MarkerDecoration(i, new that.Point(0, -5));
        var marker = new that.Marker({
          position:latLng,
          map:map
        });
        markers.push(marker);
      }
      markerClusterer = new that.MarkerCluster({
        map:map,
        minimumClusterSize:2, //默认2
        markers:markers,
        zoomOnClick:true, //默认为true
        gridSize:30, //默认60
        averageCenter:true, //默认false
        maxZoom:18, //默认18
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  // height: 100%;
  min-height: calc(100vh - 70px - 92px);
  // min-height: 500px;
  display: inline-block;
  // 容器可拖放
  resize: both;
  overflow: auto;
}
</style>
